<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block slot="content">新增预约</block>
		</cu-custom>
		<view style="margin-top: -2px;" class="bg-main padding-sm ">
			<view class="bg-white radius shadow">
				<view class="padding-sm flex justify-between align-center">
					<text class="text-lg">预定门店：</text>
					<zqs-select @change="mdChange" placeholder="选择门店" value-key="mdid" label-key="mdmc" title="选择门店"
						:list="mds" v-model="yyjlitem.mdid"></zqs-select>
				</view>
				<view class="padding-sm flex justify-between align-center">
					<text class="text-lg">预定房间：</text>
					<zqs-select @change="fjChange" placeholder="选择房间" value-key="fjid" label-key="fjmc" title="选择房间"
						:list="fjs" v-model="yyjlitem.fjid"></zqs-select>
				</view>
				<view v-if="yyjlitem.fjid" class="padding-sm flex justify-start align-center">
					<text class="padding-xxs bg-main margin-right round">{{func[fj.func]}}</text>
					<text class="padding-xxs bg-main margin-right round">{{tp[fj.tp]}}</text>
				</view>

			</view>



		</view>


		<view class="bg-white padding-sm">
			<view class="padding-sm flex justify-between align-center">
				<text class="text-lg">日期：</text>
				<text @click="openDate">{{yyjlitem.rq}}<text class="cuIcon-right"></text></text>
			</view>
			<xiaomiaogu-good-date-picker ref="goodDatePicker" @change="changeDate"
				:option="dateOption"></xiaomiaogu-good-date-picker>

		</view>

		<view class="bg-white padding-sm">
			<view class="cu-timeline" v-for="(item, index) in yyjlitems" :key="index">

				<view class="cu-item ">
					<view style="z-index: 10;"
						:style="{backgroundColor: item.pflg ? 'rgba(255, 0, 0, 0.1)' : 'rgba(255, 255, 0, 0.1)'}"
						class="padding-sm relative flex justify-between align-center radius">
						<view class="flex align-center radius">
							<view :class="item.pflg ? 'text-red' : 'text-bold text-black'"
								class="flex justify-start align-center padding-left-sm ">
								<text>{{item.st}}</text>~
								<text>{{item.et}}</text>
							</view>
							<view :class="item.pflg ? 'text-red' : 'text-yellow'" class="radius padding-xs">
								{{item.pflg ? '已占用' : '空闲中'}}
							</view>
						</view>

						<text v-if="item.show" @tap="closeYyitem(item)" class="text-yellow">
							预约<text class="cuIcon-unfold"></text>
						</text>
						<view v-else class="flex align-center">
							<text class="text-yellow" @tap="tapYYjlitem(item, index)" v-if="!item.pflg">预约<text
									class="cuIcon-right"></text></text>
						</view>
					</view>
					<view :style="{backgroundColor: item.pflg ? 'rgba(255, 0, 0, 0.1)' : 'rgba(255, 255, 0, 0.1)'}"
						v-if="item.show" class="">
						<view class=" flex justify-end align-center padding-sm">
							<text class="text-yellow ">请点击选择开始时间：</text>
							<picker class="" mode="time" :value="item.st" :start="item.ststart" :end="item.stend"
								@change="timeChange($event, item, 'st', index)">
								<view class="flex align-center text-black text-lg"><text>{{item.st}}</text><text
										class="cuIcon-right"></text></view>
							</picker>
						</view>
						<view class=" flex justify-end align-center padding-sm">
							<text class="text-yellow ">请点击选择结束时间：</text>
							<picker class="" mode="time" :value="item.et" :start="item.etstart" :end="item.etend"
								@change="timeChange($event, item, 'et', index)">
								<view class="flex align-center text-black text-lg"><text>{{item.et}}</text><text
										class="cuIcon-right"></text></view>
							</picker>
						</view>

						<view class="text-gray padding-sm">
							<view class="bg-yellow radius shadow overflow-hidden ">
								<view class="padding-xs  ">课房价格结算</view>
								<view v-for="(price, jndex) in item.prices" :key="jndex" class="padding-xs ">
									<view class="bg-white radius shadow">
										<view class="flex justify-start align-baseline padding-xs text-sm text-yellow">
											<text>时段【{{jndex+1}}】：</text>
											<text v-if="price.tag" class="text-sm">{{price.tag}}</text>
											<text v-else class="text-sm">{{price.st}}～{{price.et}}</text>
										</view>
										<view class="flex justify-between align-baseline padding-xs">
											<view>
												<text>
													<text class="text-red text-lg text-bold">￥{{price.dj /100}}</text>
													<text class="text-sm padding-left-xs">/分钟</text>
												</text>
												<text class="padding-lr-sm">✖</text>
												<text class="text-sm">
													{{price.minuts}}分钟
												</text>
											</view>
											<text class="text-red text-bold text-sm">￥{{price.xjje/100}}</text>
										</view>
									</view>
								</view>
								<view class="padding-xs flex justify-end align-baseline"><text
										class="text-lg text-bold text-white">￥{{item.je/100}}</text></view>
								<view class="padding-xs flex justify-end align-baseline">
									<text @tap="submitItem(item)"
										class="cu-tag padding-lg radius bg-gradual-orange">提交</text>
								</view>
							</view>
						</view>

						<view>

						</view>
					</view>
				</view>

			</view>
		</view>
		<view v-if="confirm.show" class="vh-100 vw-100 fixed flex flex-direction justify-end"
			style="z-index: 99; background-color: rgba(255, 255, 255, 0.5); top: 0;">
			<view class=" bg-white w-100" style="bottom: 0; padding-bottom: 100px;">
				<view @tap="closeConfirm" class="padding-sm bg-red flex justify-between align-center">
					<text>结算</text>
					<text class="cuIcon-close"></text>
				</view>
				<view class="padding-sm bg-white">
					<text>金额：</text>
					<text class="text-red text-lg">￥{{confirm.item.je/100}}</text>
				</view>
				<view v-if="hxqs.length > 0" class="">
					<view class="padding-sm flex justify-between align-center">
						<text>可使用的券：<text v-if="hxqs.length == 0">暂无记录</text></text>
						<text @tap="cancelHxq" class="cu-tag bg-red padding-xs round">取消</text>
					</view>
					<view v-for="(hxq,index) in hxqs" :key="index" class="padding-xs">
						<view @tap="hxqCheck(hxq, index)"
							class="shadow radius bg-white flex justify-between align-center padding-sm text-lg">
							<text>
								<text>券【{{index+1}}】</text>
								<text>{{qtype[hxq.qtype]}}:</text>
								<text>{{hxq.code}}</text>
							</text>
							<text class="text-red">
								<text v-if="hxq.checked" class="cuIcon-roundcheckfill"></text>
								<text v-else class="cuIcon-round"></text>
							</text>
						</view>
					</view>
				</view>
				<view class="flex justify-between align-center absolute bottom0 w-100">
					<view class="w-50 flex justify-start padding-sm align-baseline">
						<text>实付金额：</text>
						<text class="text-red text-lg text-bold">￥{{confirm.item.sfje/100}}</text>
					</view>
					<view @tap="submitYy(confirm.item)" class="w-50 bg-red padding-sm text-center">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				yy: {
					currentYy: undefined,
				},
				confirm: {
					show: false,
					items: [],
					head: undefined,
					item: undefined,
				},
				yyjlitem: {
					yyjlitemid: "",
					mdid: "",
					fjid: "",
					mdmc: "",
					fjmc: "",
					pflg: false,
					je: 0,
					rq: "",
					st: "",
					et: "",
					qtype: "",
					qid: "",
					sfje: 0,
					hyjlid: "",
				},
				//门店信息
				md: {},
				fj: {
					fjid: "",
					func: "DANC",
					tp: "DB",
					dj: 60,
				},

				tp: {},
				func: {},
				locamap: {},

				yyjlitems: [],

				mds: [],
				fjs: [],

				hxqs: [],
				qtype: undefined,

				dateOption: {
					isRange: false,
					isModal: true,
					isShowSubmit: false,
					sd: "选择开始日期",
					ed: "选择结束日期",
					dateNum: 0,
					cd: "选择日期"
				},

			};

		},
		created: function() {
			this.constant.get("ROOMFUNC").then(data => {
				this.func = data.ROOMFUNC;
			});
			this.constant.get("ROOMTP").then(data => {
				this.tp = data.ROOMTP;
			});
			this.constant.get("QTYPE").then(data => {
				this.qtype = data.QTYPE;
			});
			this.mds = this.constant.mds;
		},
		onLoad: function(option) {
			this.md.mdid = option.mdid;
			this.fj.fjid = option.fjid;
			this.yyjlitem.mdid = option.mdid;
			this.yyjlitem.fjid = option.fjid;
			this.yyjlitem.rq = this.yyutil.getCurrentDateStr();
			this.mdChange({
				mdid: option.mdid
			});
			this.fjChange({
				fjid: option.fjid
			});

		},

		methods: {
			submitYy: function(item) {
				let yyjlitem = {
					yyjlitemid: "",
					mdid: this.md.mdid,
					fjid: this.fj.fjid,
					mdmc: this.md.mdmc,
					fjmc: this.fj.fjmc,
					je: item.je,
					pflg: false,
					rq: item.rq,
					st: item.st,
					et: item.et,
					sfje: item.sfje,
					clientid: this.store.state.client.clientid
				};
				this.api("/yy/item/post").send({
					item: yyjlitem,
				}).then(data => {
					if (data.item.prepaydata) {
						this.pay.exePay(JSON.parse(data.item.prepaydata)).then(data => {
							this.message.confirm({
								content: "支付成功",
								showCancel: false,
								complete: () => {
									uni.navigateBack();
								}
							});
						});
					}
				});
			},
			closeConfirm: function() {
				this.hxqs = [];
				this.confirm.item = undefined;
				this.confirm.show = false;
			},
			cancelHxq: function() {
				this.hxqs.forEach(item => {
					item.checked = false;
				});
				this.confirm.item.sfje = this.confirm.item.je;
				this.$forceUpdate();
			},
			hxqCheck: function(hxq, index) {
				this.hxqs.forEach(item => {
					item.checked = false;
				});
				hxq.checked = true;
				this.confirm.item.sfje = 0;
				this.$forceUpdate();
			},
			submitItem: function(item) {
				this.loadHxqs();
				item.sfje = item.je;
				
				let minuts = this.yyutil.getTimeDifference(item.st, item.et);
				
				if (minuts < 60) {
					this.message.info("时长不能小于一小时");
					return;
				} else {
					this.confirm.item = item;
					this.confirm.show = true;
				}
				
				
			},
			recomputedJe: function(item, index) {
				this.loadPirce(item.st, item.et).then(data => {
					item.prices = data;
					item.je = 0;
					for (let index in item.prices) {
						let price = item.prices[index];
						let minuts = this.yyutil.getTimeDifference(price.st, price.et);
						price.minuts = minuts;
						price.xjje = price.dj * minuts;
						item.je += price.xjje;
					}
					this.$forceUpdate();
				});
			},
			closeYyitem: function(item, index) {
				item.show = false;
				this.$forceUpdate();
			},
			tapYYjlitem: function(item, index) {
				item.ststart = item.st.toString();
				item.stend = item.et.toString();
				item.etstart = item.st.toString();
				item.etend = item.et.toString();
				item.show = true;
				this.recomputedJe(item, index);
				this.$forceUpdate();

			},
			loadPirce: function(st, et) {
				return this.api("/fj/price/get").send({
					fjid: this.fj.fjid,
					st,
					et,
				});
			},
			mdChange: function(e) {
				this.md = e;
				this.fjs = [];
				this.fj.fjid = "";
				this.api("/fj/list/get").send({
					mdid: e.mdid,
					jyms: "SD"
				}).then(data => {
					this.fjs = data.fjs;
				});
			},
			fjChange: function(e) {
				this.fj.fjid = e.fjid;
				this.loadYyjls(e.fjid);
			},
			loadYyjls: function(fjid) {
				this.yyjlitems = [];
				this.api("/yy/item/list/get").send({
					fjid,
					st: this.yyutil.getCurrentTime()+":00",
					et: "23:59:59"
				}).then(data => {
					this.yyjlitems = this.yyutil.insertIntervalObjects(data.yyjlitems);
					for (let index in this.yyjlitems) {
						let item = this.yyjlitems[index];
						item.rq = this.yyjlitem.rq;
						item.show = false;
					}
					this.$forceUpdate();
				});
			},
			openDate: function() {
				this.$refs.goodDatePicker.open();
			},
			changeDate: function(e) {
				if (e.currentDate) {
					this.dateOption.cd = e.currentDate;
					this.yyjlitem.rq = e.currentDate;
					this.loadYyjls(this.fj.fjid);
				}
			},
			timeChange: function(e, item, tag, index) {
				item[tag] = e.detail.value;
				
				if (tag == "st") {
					item.etstart = e.detail.value;
				}
				
				if (tag == "et") {
					item.stend = e.detail.value;
				}
				
				this.recomputedJe(item, index);
				this.$forceUpdate();
			},
			loadHxqs: function() {
				this.api("/hxq/list/get").send({
					clientid: this.store.state.client.clientid,
				}).then(data => {
					this.hxqs = data.hxqs;
					this.$forceUpdate();
				});
			}

		},

	}
</script>

<style scoped>



</style>